<template>
	<view class="Detail">
		<u-navbar :autoBack="true" :title='title'></u-navbar>
		<image src="/static/2-1.jpg" alt="" />
		<div class="content">
			<div class='title'>铅酸蓄电池</div>
			<div class="line"></div>
			<view><p>电池类型</p>：<span>磷酸铁锂</span></view>
			<view><p>型号</p>：<span>LN-60</span></view>
			<view><p>容量</p>：<span>80kWh</span></view>
			<view><p>循环次数</p>：<span>200次</span></view>
			<view><p>所属电站</p>：<span>S001</span></view>
			<view><p>存放位置</p>：<span>LOC-S001-1</span></view>
			<view><p>循环次数</p>：<span>200次</span></view>
			<view><p>能量密度</p>：<span>180.5Wh/kg</span></view>
			<view><p>生产日期</p>：<span>2023-05-01</span></view>
			<view><p>质保日期</p>：<span>2026-05-01</span></view>
			<view><p>租金金额</p>：<span>800元/月</span></view>
		</div>
		<view class="goods-carts">
			<uni-goods-nav :options="options" :fill="true" :button-group="buttonGroup" @click="onClick"
				@buttonClick="submitOrder" />
		</view>
	</view>
</template>

<script>
	import {
		addOrder
	} from "@/api/api.js"
	export default {
		onLoad(option) {
			this.title = option.id;
		},
		data() {
			return {
				title: '',
				options: [{
					icon: 'chat',
					text: '客服'
				}],
				buttonGroup: [{
					text: '立即租用',
					backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
					color: '#fff'
				}],

			};
		},
		methods: {
			onClick(e) {
				uni.showToast({
					title: `服务异常`,
					icon: 'none'
				})
			},
			submitOrder() {
				if ('未选择收货地址') return
				addOrder({
					key: '', //时间
					uid: '', //用户id
					goods: [], //商品信息：商品id、规格id、数量
					remark: '', //备注
					addressId: '' //地址
				}).then(res => {
					console.log('后端返回支付参数', res);
					uni.requestPayment({
						"nonceStr": res.data.nonceStr,
						"package": res.data.package,
						"paySign": res.data.paySign,
						"signType": res.data.signType,
						"timeStamp": res.data.timeStamp,
						success(res) {
							console.log('支付成功', res);
						}
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.Detail {
		padding-top: 80rpx;
	}

	image {
		width: 100%;
	}

	.content {
		padding: 30rpx;

		.title {
			font-size: 48rpx;
		}

		.line {
			height: 1rpx;
			margin: 20rpx 0 20rpx;
			background-color: #03a1ea;
		}

		view {
			font-size: 40rpx;
			line-height: 60rpx;
			display: flex;
		p{
			width: 180rpx;
			text-align-last: justify;
		}
			span {
				color: #03a1ea;
			}
		}
	}

	.goods-carts {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}
</style>